<template>
  <div class="index">
    <!--top-->
    <div class="index-top">
      <div class="index-top-left">
        <img class="user-img" src="../../static/images/user-img.jpg" width="16%">
        <ul class="user-information">
          <li class="user-name">{{name}}</li>
          <li class="user-option"><a @click="perStation">修改密码</a>|<a @click="exit">安全退出</a></li>
        </ul>
      </div>
      <div class="index-top-right">
        <div class="help"><i class="icon iconfont icon-bangzhu"></i><span class="help-t">帮助</span></div>
        <div class="set"><i class="icon iconfont icon-shezhi1"></i><span class="help-t">设置</span></div>
      </div>
    </div>
    <!--top end-->
    <!--cont-->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="index-cont on">
            <ul>
              <li><i class="icon iconfont icon-yonghu cont-icon"></i></li>
              <li class="index-cont-t">用户管理</li>
              <li><router-link to="/user"><input class="index-cont-btn" type="button" value="管   理"></router-link></li>
            </ul>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="index-cont">
            <ul>
              <li><i class="icon iconfont icon-jiaoseguanli cont-icon"></i></li>
              <li class="index-cont-t">角色管理</li>
              <li><router-link to="/role"><input class="index-cont-btn" type="button" value="管   理"></router-link></li>
            </ul>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="index-cont">
            <ul>
              <li><i class="icon iconfont icon-9quanxiankongzhi cont-icon"></i></li>
              <li class="index-cont-t">权限管理</li>
              <li><router-link to="/grant"><input class="index-cont-btn" type="button" value="管   理"></router-link></li>
            </ul>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="index-cont">
            <ul>
              <li><i class="icon iconfont icon-shezhi cont-icon"></i></li>
              <li class="index-cont-t">系统参数</li>
              <li><router-link to="/system"><input class="index-cont-btn" type="button" value="管   理"></router-link></li>
            </ul>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="index-cont">
            <ul>
              <li><i class="icon iconfont icon-yonghu cont-icon"></i></li>
              <li class="index-cont-t">用户管理</li>
              <li><input class="index-cont-btn" type="button" value="管   理"></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!--cont end-->
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>

    <!--个人中心-->
    <Persional ref="persional" v-if="show"></Persional>
  </div>
</template>

<script>
import Swiper from "../../static/js/swiper.min.js";
import Persional from "../components/persional";
export default {
  name: "index",
  components: { Persional },
  data() {
    return {
      show: false,
      name: ""
    };
  },
  mounted: function() {
    let swiper = new Swiper(".swiper-container", {
      slidesPerView: 4,
      spaceBetween: 0,
      pagination: {
        el: ".swiper-pagination",
        clickable: true
      }
    });
    this.$nextTick(() => {
      //防止在登陆页没有登陆时候直接手动改变url访问
      this.initPage();
      //调用全局方法 设置index高度
      this.indexHeight();
      //hover
      $(".index-cont").hover(function() {
        $(this)
          .addClass("on")
          .parent()
          .siblings()
          .find(".index-cont")
          .removeClass("on");
      });
      //取到登录名
      this.name = appDB.get("userInfo").userName;
    });
  },
  methods: {
    //个人中心
    perStation() {
      this.show = true;
      this.$nextTick(() => {
        let that = this;
        layer.open({
          type: 1,
          shadeClose: true,
          title: "",
          // skin: 'layui-layer-rim', //加上边框
          area: ["40%", "364px"], //宽高
          content: $(this.$refs.persional.$el),
          end: function() {
            that.show = false;
          }
        });
      });
    },
    //安全退出
    exit() {
      this.$router.push("/");
      appDB.clear();
    }
  }
};
</script>

<style scoped>
.index-top {
  width: 100%;
  float: left;
  margin: 90px 0 50px 0;
}
.index-top-left {
  width: 50%;
  float: left;
}
.index-top-right {
  width: 50%;
  height: 30px;
  line-height: 30px;
  padding: 10px 0;
  margin-top: 44px;
  float: left;
}
.user-img {
  display: block;
  float: left;
  border-radius: 100%;
}
.user-information li {
  padding: 10px 0;
}
.user-name {
  color: #fff;
  font-size: 24px;
  text-indent: 15px;
}
.user-option {
  height: 30px;
  color: #549ee7;
  line-height: 30px;
}
.user-option a {
  color: #549ee7;
  margin: 0 15px;
}
.set {
  color: #3478bd;
  text-align: right;
  float: right;
  cursor: pointer;
  margin-right: 25px;
}
.help {
  color: #3478bd;
  text-align: right;
  float: right;
  cursor: pointer;
}
.icon-shezhi1 {
  font-size: 25px;
  display: inline-block;
}
.icon-bangzhu {
  font-size: 22px;
  display: inline-block;
}
.help-t {
  float: right;
  margin-left: 4px;
}
.set-t {
  float: right;
  margin-left: 4px;
}
.swiper-container {
  width: 100%;
  float: left;
  background: #0a2f4d;
  box-shadow: 0 0 10px -2px #06131e;
}
.swiper-slide {
  width: 25% !important;
  background: url("../../static/images/line-shu.jpg") right repeat-y;
}
.index-cont {
  width: 100%;
  float: left;
  padding: 50px 0;
  text-align: center;
  cursor: pointer;
}
/* .swiper-slide:nth-child(4n) {
  background: none;
} */
.swiper-slide:last-child {
  background: none;
}
.cont-icon {
  color: #4897e5;
  font-size: 46px;
}
.index-cont-t {
  color: #2d6bac;
}
.index-cont-btn {
  width: 60%;
  height: 40px;
  float: left;
  margin: 0 20%;
  background: #275588;
  font-size: 16px;
  border-radius: 30px;
  cursor: pointer;
  color: #fff;
}
.index-cont-t {
  margin: 50px 0;
  font-size: 16px;
}
/* .index-cont:hover {
  background-image: -webkit-linear-gradient(to bottom, #10d14b, #0ca74a);
  background-image: linear-gradient(to bottom, #10d14b, #0ca74a);
}
.index-cont:hover .cont-icon {
  color: #fff;
}
.index-cont:hover .index-cont-t {
  color: #fff;
}
.index-cont:hover .index-cont-btn {
  background: #fff;
  color: #49fb1f;
  box-shadow: 0 0 10px -2px #0a3e1e;
} */
.index-cont.on {
  background-image: -webkit-linear-gradient(to bottom, #10d14b, #0ca74a);
  background-image: linear-gradient(to bottom, #10d14b, #0ca74a);
}
.index-cont.on .cont-icon {
  color: #fff;
}
.index-cont.on .index-cont-t {
  color: #fff;
}
.index-cont.on .index-cont-btn {
  background: #fff;
  color: #49fb1f;
  box-shadow: 0 0 10px -2px #0a3e1e;
}
@media screen and (max-width: 1400px) {
  .index-top {
    width: 100%;
    float: left;
    margin: 3% 0;
  }
  .index-cont {
    width: 100%;
    float: left;
    padding: 15% 0;
    text-align: center;
    cursor: pointer;
  }
  .index-cont-t {
    margin: 30px 0;
    font-size: 16px;
  }
}
</style>
